<template>
    <nav class="nav-bar">
      <ul class="nav-list">
        <li class="nav-item" v-for="(item, index) in navItems" :key="index">
          <a :href="item.link" class="nav-link">{{ item.text }}</a>
        </li>
      </ul>
    </nav>
  </template>
  
  <script>
  export default {
    name: 'NavBar',
    data() {
      return {
        navItems: [
          { text: 'Home', link: '#' },
          { text: 'About', link: '#' },
          { text: 'Services', link: '#' },
          { text: 'Portfolio', link: '#' },
          { text: 'Contact', link: '#' }
        ]
      };
    }
  };
  </script>
  
  <style scoped>
  .nav-bar {
    background-color: #8B4513; /* 棕色背景 */
    overflow: hidden;
  }
  
  .nav-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  .nav-item {
    float: left;
  }
  
  .nav-link {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  .nav-link:hover {
    background-color: #D2691E; /* 悬停时的背景色 */
  }
  </style>